<template>
  <ShowDialog :id="work.id">
    <li class="work-item">
      <span class="work-status" :style="statusStyle">{{ statusName }}</span>
      <div class="work-title" :title="work.titleType">
        <div class="work-title-text">
          {{ work.titleType }}
        </div>
      </div>
      <div class="divider"></div>
      <div class="work-base-info">
        <div class="work-base-info-item">
          <div class="work-base-info-item-title">发起人</div>
          <div class="work-base-info-item-value">
            {{ work.userName }}
          </div>
        </div>
        <div class="work-base-info-item">
          <div class="work-base-info-item-title">发起时间</div>
          <div class="work-base-info-item-value">
            {{ getDateString(work.createTime) }}
          </div>
        </div>
        <div class="work-base-info-item">
          <div class="work-base-info-item-title">部门</div>
          <div class="work-base-info-item-value">
            {{ getDeptName(work.originatorDeptName) }}
          </div>
        </div>
      </div>
      <div class="work-pics">
        <div class="work-pics-title">流程安全管控图片</div>
        <div class="work-pics-list" v-if="work.imgUrls && work.imgUrls.length > 0">
          <!-- <div class="work-pics-item" v-for="(pic, index) in work.imgUrls" :key="index"
            :style="{ backgroundImage: 'url(' + pic + ')' }">
          </div> -->
          <a-space>
            <div class="work-pics-item" v-for="(pic, index) in work.imgUrls" :key="index">
              <!-- 方法一 -->
              <!-- <img style="width: 100%;height: 100%;" :src="pic" alt="" loading="lazy"> -->
              <!-- 方法二 -->
              <!-- <img style="width: 100%;height: 100%;" :src="pic" alt="" ref="lazyImg" @load="onImgLoad(index)"> -->
              <!-- 方法三 -->
              <img style="width: 100%;height: 100%;" alt="" v-lazy="pic">
            </div>
          </a-space>
        </div>
        <div class="empty-box" v-else>暂无图片</div>
      </div>
    </li>
  </ShowDialog>
</template>

<script>
import * as dayjs from 'dayjs';
import ShowDialog from '../../../components/ZSModal/ShowDialog.vue'
export default {
  name: 'WorkItem',
  components: {
    ShowDialog
  },
  props: {
    work: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  computed: {
    statusName() {
      const status = this.work.status;
      switch (status) {
        case 'RUNNING':
          return '正在进行';
        case 'COMPLETED':
          return '已完成';
        case 'TERMINATED':
          return '已撤销';
        default:
          return '未知';
      }
    },
    statusStyle() {
      const status = this.work.status;
      switch (status) {
        case 'RUNNING':
          return { color: '#ebff00' };
        case 'COMPLETED':
          return { color: '#00ff00' };
        case 'TERMINATED':
          return { color: '#ff6600' };
        default:
          return { color: '#ff6600' };
      }
    },
  },
  created() { },
  methods: {
    showWorkDetail() {
      // this.$showWorkDetail(this.work.id);
      // this.$showWorkDetail('1712086861024882689'); // 审批
      // this.$showWorkDetail('1737638284399525890'); // table
    },
    getDateString(dateTime) {
      return dayjs(dateTime).format('YYYY-MM-DD');
    },
    getDeptName(name) {
      return name.substring(name.lastIndexOf('-') + 1);
    },
    // 方法二
    onImgLoad(i) {
      let lazyImgRef = this.$refs.lazyImg;
      let img = lazyImgRef[i];
      const rect = img.getBoundingClientRect();
      if (rect.top < window.innerHeight && rect.bottom >= 0 && !img.src) {
        img.src = img.dataset.src;
      }
    }
  },
};
</script>

<style lang="less" scoped>
.work-item {
  width: 100%;
  min-height: 203px;
  padding: 20px;
  position: relative;
  border-radius: 10px;
  border: 1px solid #4b84f3;
  background: url(~@/assets/work-header-bg.png) 0 -2px / 100% no-repeat,
    linear-gradient(180deg, #2c4f93 0%, rgba(3, 48, 105, 0) 107.67%);
  cursor: pointer;

  .work-status {
    position: absolute;
    top: 0;
    right: 0;
    width: 73px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    color: #ebff00;
    font-size: 12px;
    font-weight: 700;
    background: #000;
    background: linear-gradient(90deg, #0897ff 10.96%, rgba(8, 136, 255, 0) 81.51%);
    border-bottom-left-radius: 13px;
  }

  .work-title {
    display: flex;
    align-items: center;
    padding-right: 60px;
    margin-bottom: 10px;
    min-height: 40px;

    .work-title-text {
      font-size: 18px;
      font-weight: 900;
      line-height: 25px;
      text-align: left;
      background: -webkit-linear-gradient(#ffffff 5.44%, #2858b5 145.15%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      // display: -webkit-box;
      // -webkit-line-clamp: 2; /* 限制最大行数 */
      // -webkit-box-orient: vertical; /* 垂直布局 */
    }
  }

  .divider {
    width: 100%;
    height: 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.4);
  }

  .work-base-info {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;

    &-item {
      text-align: left;
      line-height: 30px;

      &-title {
        font-size: 14px;
        font-weight: 400;
        color: #8dbbed;
      }

      &-value {
        margin-top: 5px;
        font-size: 16px;
        font-weight: 400;
        color: #fff;
      }
    }
  }

  .work-pics {
    margin-top: 14px;

    .work-pics-title {
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      text-align: left;
      color: #8dbbed;
    }

    .work-pics-list {
      margin-top: 8px;
      display: flex;
      flex-wrap: nowrap;
      overflow: hidden;

      .work-pics-item {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
        border-radius: 2px;
        background-size: cover;
        background-position: center;
      }
    }
  }

  .empty-box {
    margin-top: 8px;
    line-height: 50px;
    font-size: 14px;
  }
}
</style>
